<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
<style>
	.container{
		width: 500px;
		height: 700px;
		text-align: left;
       margin: 20px auto;
       font-size: 20px;
	}
	#dlu{margin-right: 20px;}
	#pass1{
		margin-right: 80px;
	}
	#email{
		margin-right:30px; 
	}
	#toux{
		margin-left: 30px;
	}
	
</style>
</head>
<body>
		<div class="container">
		<form action="" align='center'>
		<p>
		<label for="">姓名：</label>
		<input type="text" id="username">
		<span id="min">不能为空且不能为数字</span>
		</p>
		<p>
		<label for="">姓氏：</label>
		<input type="text" id="xing" >
	    <span id="min"></span></p>
		<p>
		<label for="">登录名：</label>
		<input type="text" id="dlu" >
        <span id="s1"></span>
	    </p>
		<p>
		<label for="">密码：</label>
		<input type="password" id="pass" >
	    <span id="s2"></span>
	    </p>
		<p>
		<label for="">再次输入密码：</label>
		<input type="password" id="pass1" >
	    <span id="s3"></span>
	    </p>
    	<p>
    	<label for="">电子邮箱：</label>
    	<input type="text" id="email" >
        <span id="s4"></span>
       </p>
        <p>
        <label for="">性别：</label>
        <input type="radio" id="male" checked value="男" name="gender">男
        <input type="radio" id="male" name="gender" value="女">女
        <span id="s5"></span>
        </p>
        <!-- <p>
        <label for="">头像：</label>
        <input type="text" id="toux" >
        <input type="button" id="yul" value="浏览">
        </p>
        <p>
        爱好：
        <input type="checkbox" id="yud">运动
        <input type="checkbox" id="lt">聊天
        <input type="checkbox" id="wyx">玩游戏
        </p>
        <p>
        出生年月：
        <input type="date" id="day">
        </p> -->
        <input type="button" value="提交" id="tj">
        <input type="reset" value="重置" id="czhi">
        </form>
		</div>


</body>
<script>
	function $(id){
		return document.getElementById('id');
	}
var reg=/^\D+$/g;
username.onblur=function (){
	var username=$('username').value;
if (reg.test(username)==false) {
	 $('min').innerText='不能为空且不能为数字！'
}else{
     $('min').innerText='正确';
}
}
// function $(id){
// 	return document.getElementById('id');
// }
// //姓名失去焦点：
// $('username').onblur=function(){
// 	var reg=/^\D+$/
// 	 var str = this.value;
//                 if(str==''){
//                     s1.innerHTML='名字不能为空';
//                     s11.style.color = "red";
//                     return false;
//                   }else if(!code.test(str)){
//                     sp1.innerHTML='名字不能有数字';
//                     sp1.style.color = "red";
//                     return false;
//                   }else if(code.test(str)){
//                     sp1.innerHTML='';
//                   }
// }

</script>
</html>